import { Link } from "@tanstack/react-router";
import { CalendarDaysIcon, HouseIcon } from "lucide-react";
import { ModeToggle } from "./mode-toggle";
import { User } from "./user";

const nav = [
  {
    title: "Home",
    href: "/",
    icon: HouseIcon,
  },
  {
    title: "Reports",
    href: "/reports",
    icon: CalendarDaysIcon,
  },
  // {
  //   title: "Organizations",
  //   href: "/organizations",
  //   icon: Building2Icon,
  // },
];

export default function Header() {
  return (
    <header className="sticky top-0 z-50 flex h-14 w-full items-center justify-between px-6 backdrop-blur-lg">
      <nav className="hidden items-center gap-4 md:flex lg:gap-6">
        {nav.map((item) => (
          <Link
            to={item.href}
            key={item.title}
            className="group relative flex items-center gap-2 font-medium text-muted-foreground text-xs transition-colors hover:text-foreground lg:text-sm"
          >
            <item.icon className="size-4" />
            <p>{item.title}</p>
          </Link>
        ))}
      </nav>
      <div className="flex items-center gap-4">
        <ModeToggle />
        <User />
      </div>
    </header>
  );
}
